
<!DOCTYPE html>
<html>
<head>
    <title>camera</title>
    <style>
        body { display: flex; flex-direction: column; align-items: center; }
        video, canvas { border: 1px solid #ccc; margin: 10px; max-width: 100%; }
        button { padding: 10px 20px; margin: 5px; }
        .startBtn {
            margin-top: 60px;
            color: #ffffff;
            background-color: blue;
            border-radius: 5px;
            border: none;
            font-size: 18px;
        }
        .captureBtn {
            color: #ffffff;
            background-color: blue;
            border-radius: 5px;
            border: none;
            font-size: 18px;
        }
        .video-wrap {
            margin-top: 10px;
            margin-bottom: 10px;
            object-fit: fill;
            width: 350px;
            height: 350px;
            border-radius: 150px;
            border: none;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .video-wrap- {
            object-fit: fill;
            width: 350px;
            height: 350px;
            border-radius: 180px;
            border: none;
        }
    </style>
    <!-- <script src="https://cdn.jsdelivr.net/npm/mitt@3.0.0/dist/mitt.umd.min.js"></script> -->
     <!-- <script src="./mitt.min.js"></script> -->
</head>
<body>
    <button class="startBtn" id="startBtn">Start shooting</button>
    <div class="video-wrap">
        <video 
        class="video-wrap-" 
        id="video" 
        autoplay 
        playsinline 
        ></video>
    </div>
    <!-- style="display: none;" -->
    <canvas id="canvas" style="display: none;"></canvas>
    <div>
        <button class="captureBtn" id="captureBtn">submit</button>
        <!-- <button id="stopBtn">停止</button> -->
    </div>

    <script >
        // 使用mitt
        // const emitter = mitt();
        // var search  = window.location.search.split('?')[1];
        // var obj = {};
        // search.split('&').map(item => {
        //     let [key, value] = item.split('=');
        //     obj[key] = value;
        // });

        // console.log(' - - - > obj', emitter);
        const startBtn = document.getElementById('startBtn');
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let stream = null;
        // 启动摄像头
        startBtn.addEventListener('click', async () => {
            try {
                stream = await navigator.mediaDevices.getUserMedia({ 
                    video: { width: 591, height: 591 } 
                });
                video.style.visibility = "visible";
                startBtn.style.display = "none";
                
                video.srcObject = stream;
                video.onloadedmetadata = () => {
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                };
               
            } catch (err) {
                // alert(err ||"请允许访问您的摄像头");
                console.error("摄像头访问失败:", err);

            }
        });

        // 捕获帧到Canvas
        document.getElementById('captureBtn').addEventListener('click', () => {
            if (!stream) return;
            ctx.drawImage(video, 0, 0, 591, 591);
            // 可选：保存图片
            const link = document.createElement('a');
            link.download = 'capture-' + Date.now() + '.png';
            const base64 = canvas.toDataURL('image/png');
            console.log(' - - - > base64', base64, canvas.width, canvas.height);
            // 判断运行环境后选择对应API
            if (window.uni) {
              uni.postMessage({ data: { key: 'value1' } }); // App/小程序:ml-citation{ref="1,3" data="citationList"}
            } else {
              window.parent.postMessage({"action": 'updateImage', 'image': base64 }, '*'); // H5环境:ml-citation{ref="2,8" data="citationList"}
            }
            // 触发事件
            // emitter.emit('event', { detail: 'Hello, mitt!' });
        });

        // 停止摄像头
        document.getElementById('stopBtn').addEventListener('click', () => {
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                video.srcObject = null;
                stream = null;
            }
        });
    </script>
</body>
</html>
